import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Layouts 1.1

Item {
    id: root
    anchors.fill: parent

    ListView {
        id: rootView
        anchors.fill: parent
        delegate: groupsDelegate
        model: listModel
        highlight: Rectangle {color: "lightsteelblue"; radius: 6}

        Component {
            id: groupsDelegate

            Item {
                id: container
                //width: 200
                height:childrenRect.height

                Column {
                    x: 14
                    id: mainColumn

                    Row {
                        id: mainRow
                        spacing: 3
                        property bool expanded: false

                        Image {
                            id: expander
                            height: 72
                            source: "qrc:/expander.png"
                            rotation: mainRow.expanded ? 90 : 0
                            opacity: elements.count === 0 ? 0 : 1  //透明度
                            Behavior on rotation {
                                NumberAnimation {duration: 110}
                            }
                            MouseArea {
                                visible: expander.opacity === 1 ? true : false
                                id: expanderMouseArea
                                anchors.fill: parent
                                onClicked: {
                                    mainRow.expanded = !mainRow.expanded
                                    console.log(container.height)
                                }
                            }
                        }

                        Item{
                            height: 72
                            function bestDelegate(t) {
                              if(t === 0)
                                return txt;
                              return ag; // t == "text"
                            }
                            //文本基本要求
                            Text {
                               id: txt
                                color:"blue"
                                text: group
                            }
                            Action{id:ag}
                              Loader{
                                  id: myLoader
                                  anchors.fill: parent;
                                  source: bestDelegate(elements.count)
                              }
                        }
                    }

                    Item {
                        //width: 200
                        height: childView.contentHeight
                        visible: mainRow.expanded

                        ListView {
                            id: childView
                            anchors.fill: parent
                            model: elements
                            delegate: groupsDelegate
                            //highlight: Rectangle {color: "lightsteelblue"; radius: 5}
                            focus: true
                        }
                    }
                }
            }
        }

        ListModel {
            id:listModel
            ListElement {group: "first"; elements: []}
            ListElement {
                group: "second"
                elements: [
                    ListElement {
                        group: "second2"
                        elements: [
                            ListElement {
                                group: "second2.2"
                                elements: []
                            }
                        ]
                    },
                    ListElement {group: "second3"; elements: []},
                    ListElement {group: "second4"; elements: []}
                ]
            }
            ListElement {group: "third"; elements: []}
        }
    }


}
